<script lang="ts" setup>
const { base } = defineProps<{
  base: 2 | 4
  activeIdx: number
  links: Array<string>
}>()

// 更改父组件的选中项
defineEmits<{
  (e: 'update:activeIdx', value: number): void
}>()

// 控制选中下划线位置
const lineLeft = computed(() => (base === 2 ? '25%' : '28%'))
const lineWidth = computed(() => (base === 2 ? '50%' : '40%'))

</script>

<template>
  <view my-5 flex items-center justify-around text="24 #4d555d">
    <span v-for="(item, idx) of links" :key="idx" :class="[activeIdx === idx && 'active']"
      @click="$emit('update:activeIdx', idx)">
      {{ item }}
    </span>
  </view>
</template>

<style lang="scss" scoped>
.active {
  position: relative;
  font-size: 24rpx;

  &::after {
    content: '';
    height: 4rpx;
    bottom: -10rpx;
    position: absolute;
    border-radius: 10rpx;
    left: v-bind(lineLeft);
    width: v-bind(lineWidth);
    background-color: #4d555d;
  }
}
</style>
